<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/module/admin.css?v=315"/>
    <link rel="stylesheet" href="/assets/module/formSelects/formSelects-v4.css"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
    *{
        background: white;
    }
</style>
    <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form">
        <input name="userId" type="hidden" th:value="${user.userId}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入用户名" type="text" class="layui-input"
                       lay-verType="tips" lay-verify="required" th:value="${user.username}" required readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="请输入手机号" type="text" class="layui-input"
                       lay-verType="tips" lay-verify="required|phone" th:value="${user.phone}" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input name="email" placeholder="请输入邮箱" type="text" class="layui-input"
                       lay-verType="tips" lay-verify="required|email" th:value="${user.email}" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="roleId"
                        lay-verify="required"
                        xm-select-direction="down"
                        xm-select="user-update-role"
                        xm-select-skin="default">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男"  th:field="*{user.sex}"/>
                <input type="radio" name="sex" value="0" title="女"  th:field="*{user.sex}"/>
                <input type="radio" name="sex" value="2" title="保密"  th:field="*{user.sex}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">个人简介</label>
            <div class="layui-input-block">
                    <textarea name="describes" placeholder="请输入个人简介" class="layui-textarea"
                              lay-verType="tips" lay-verify="required" required autocomplete="off" maxlength="200" th:text="${user.describes}"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" lay-filter="closePageDialog" lay-submit>取消</button>
            <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button>
        </div>
    </form>
<script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/assets/js/common.js?v=315"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var user=[[${user}]];
    layui.use(['form','formSelects','notice','admin'], function(){
        var form= layui.form;
        var notice = layui.notice;
        var formSelects = layui.formSelects;
        var $ = layui.jquery;
        var admin = layui.admin;
        layui.form.render();   //表单渲染，得渲染才会有效果显示出来

        formSelects.render();

        formSelects.config('user-update-role', {
            searchUrl:  '/role/list',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].roleName,
                        value: data[i].roleId
                    })
                }
                result.data = tranData;
                return result;
            },
            success: function () {
                formSelects.value('user-update-role', user.roleId.split(','));
            },
            error: function (id, url, searchVal, err) {
                notice.msg('获取角色列表失败',{icon:2,timeout:2000,animateInside:true,audio:'1'});
            }
        });


        form.on("submit(closePageDialog)",function () {
            top.layui.layer.closeAll();
        });

        form.on('submit(modelSubmitUser)', function (data) {
            if (nativeEqual(data.field,user)){
                top.layui.notice.warning({
                    title:'提示信息',
                    message:"数据未作任何修改！",
                    audio:'1',
                    animateInside:true
                });
                return false;
            }
            $.post('/admin/update', data.field, function (data) {
                if (data.code==200){
                    top.layui.layer.closeAll();
                } else{
                    notice.msg(data.message,{icon:2,timeout:2000,animateInside:true,audio:'1'});
                }
            });
            return false;
        });

    });
    /*]]>*/
</script>

</html>